import { Divider, message, Select, Typography } from "antd"
import React, { useEffect, useState } from "react"
import moment from "_moment@2.29.1@moment"
import Layout from "../../../components/layout"
import stores from "../../../stores"
import { Res } from "../../../types/base"
import $http from "../../../utils/require"


const { Title, Paragraph } = Typography

interface orderItem {
    "status": string,
    "_id": string,
    "trade_no": string,
    "amount": number,
    "address": string,
    "products": [
        {
            "_id": string,
            "count": number,
            "product": {
                "_id": string,
                "name": string,
                "price": number
            }
        }
    ],
    "user": {
        "_id": string,
        "name": string
    },
    "createdAt": string,
    "updatedAt": string,
    "__v": number
}

interface OrderStatus { Unpaid: string; Paid: string; Shipping: string; Completed: string; Cancelled: string;[key: string]: string }
const ORDER_STATUS_MAP: OrderStatus = {
    Unpaid: '未付款',
    Paid: '已付款',
    Shipping: '运输中',
    Completed: '已完成',
    Cancelled: '已取消',
}

const Orders = () => {
    const [orders, setOrders] = useState<orderItem[]>([])

    const changeOrderStatus = (orderId: string, status: string) => {
        $http['updateOrderStatus']({
            orderId,
            status,
            userId: stores.User.user._id
        }).then((res: {
            "n": number,
            "nModified": number,
            "ok": number
        }) => {
            message.success('状态修改成功')
        }).catch((e: Res) => {
            message.error(e.error)
        })
    }

    useEffect(() => {
        $http['getOrderList']({
            userId: stores.User.user._id
        }).then(res => {
            setOrders(res)
        })
    }, [])
    return (
        <Layout title="订单" subtitle={orders.length > 0 ? `当前订单数量是 ${orders.length}` : '还没有订单'}>
            {
                orders.map(el => (
                    <>
                        <Title level={4}>订单ID: {el._id}</Title>
                        <table style={{ width: '100%' }}>
                            <thead className="ant-table-thead">
                                <tr>
                                    <td className="ant-table-cell">订单状态</td>
                                    <td className="ant-table-cell">订单号</td>
                                    <td className="ant-table-cell">总价</td>
                                    <td className="ant-table-cell">创建时间</td>
                                    <td className="ant-table-cell">邮寄地址</td>
                                    <td className="ant-table-cell">客户姓名</td>
                                </tr>
                            </thead>
                            <tbody className="ant-table-body">
                                <tr className="ant-table-row">
                                    <td className="ant-table-cell">
                                        {ORDER_STATUS_MAP[el.status]}{" "}
                                        <Select defaultValue={el.status} onChange={(e) => changeOrderStatus(el._id, e)}>
                                            {
                                                Object.keys(ORDER_STATUS_MAP).map(key => (
                                                    <Select.Option value={key}>{ORDER_STATUS_MAP[key]}</Select.Option>
                                                ))
                                            }
                                        </Select>
                                    </td>
                                    <td className="ant-table-cell">{el.trade_no}</td>
                                    <td className="ant-table-cell">{el.amount}</td>
                                    <td className="ant-table-cell">{moment(el.createdAt).format('YYYY-MM-DD')}</td>
                                    <td className="ant-table-cell">{el.address}</td>
                                    <td className="ant-table-cell">{el.user.name}</td>
                                </tr>
                            </tbody>
                        </table>
                        <table style={{ width: '100%' }}>
                            <thead className="ant-table-thead">
                                <tr>
                                    <td className="ant-table-cell">商品名称</td>
                                    <td className="ant-table-cell">商品价格</td>
                                    <td className="ant-table-cell">商品数量</td>
                                    <td className="ant-table-cell">商品ID</td>
                                </tr>
                            </thead>
                            <tbody className="ant-table-body">
                                {
                                    el.products.map(item => (
                                        <tr className="ant-table-row">
                                            <td className="ant-table-cell">{item.product.name}</td>
                                            <td className="ant-table-cell">{item.product.price}</td>
                                            <td className="ant-table-cell">{item.count}</td>
                                            <td className="ant-table-cell">{item.product._id}</td>
                                        </tr>
                                    ))
                                }

                            </tbody>
                        </table>

                        <Divider></Divider>
                    </>
                ))
            }
        </Layout>
    )
}

export default Orders
